<template>
	<view class="page-box flex-center">
		<u-navbar bgColor="transparent" height="74">
			<view class="u-nav-slot-left flex-center" slot="left" @click="goBack">
				<image src="@/static/images/login/fanhui.png"></image>
			</view>
		</u-navbar>
		<view class="login-form">
			<view class="input-custom flex-between">
				<input type="text" focus class="inputText" v-model="formData.user_login" placeholder="请输入用户名" />
				<!-- 		<u-icon name="close-circle-fill" class="clear-icon" size="24" v-if="formData.user_login.length>0"
					@click="clearIcon"></u-icon> -->
			</view>
			<view class="input-custom flex-between" style="margin-top:80rpx">
				<input type="text" class="inputText" :password="true" v-model="formData.password" placeholder="请输入密码" />
				<!-- <u-icon class="eye-icon" :name="!showPassword ?  'eye-fill':'eye-off' " @click="changePassword"></u-icon> -->
				<!-- 				<u-icon name="close-circle-fill" class="clear-icon"   v-if="formData.password.length>0"
					@click="clearPwdIcon"></u-icon> -->
			</view>
			<u-checkbox-group v-model="rePasswordVal" placement="column" @change="checkboxChange">
				<view class="flex-center" style="margin-top: 58rpx;">
					<u-checkbox v-for="(item, index) in rePassword" :key="index" :name="item.name">
					</u-checkbox>
					<span class="local" @click="handleRePassword"
						:class="rePasswordVal.length > 0 ?'active':''">记住账号和密码</span>
				</view>
			</u-checkbox-group>
			<button class="login-btn flex-center" @click="login()">
				<image src="@/static/images/login/youjian.png"></image>
			</button>
			<view class="register flex-between">
				<span @click="openCode">验证码登录</span>
				<span>|</span>
				<span @click="toRegister">注册新用户</span>
				<span>|</span>
				<span @click="openForget">忘记密码</span>
				<span>|</span>
				<image src="@/static/images/login/set.png"></image>
			</view>
		</view>
		<forgetPassword ref="forgetPassword"></forgetPassword>
		<codeLogin ref="codeLogin"></codeLogin>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import common from '@/utils/wxApplet/common.js';
	import forgetPassword from '@/components/forgetPassword/forgetPassword.vue';
	import codeLogin from '@/components/codeLogin/codeLogin.vue'
	import {
		mapGetters
	} from 'vuex';
	import {
		loginApi
	} from '@/api/index.js'
	export default {
		components: {
			forgetPassword,
			codeLogin
		},
		data() {
			return {
				// 是否显示获取头像昵称按钮
				isShowUserInfo: true,
				rePasswordVal: ['记住账号和密码'],
				// 基本案列数据
				rePassword: [{
					name: '记住账号和密码'
				}],
				rememberPsw: true, // 默认记住密码
				formData: {
					user_login: "",
					password: ""
				},
				showPassword: true
			}
		},
		computed: {
			...mapGetters([
				'userInfo'
			])
		},
		onLoad() {
			this.isShowUserInfo = JSON.stringify(this.userInfo) == "{}" ? true : false
		},
		mounted() {
			// 检查本地存储中是否有记住的用户名和密码
			const savedUsername = uni.getStorageSync('userName');
			const savedPassword = uni.getStorageSync('userPsw');
			if (savedUsername && savedPassword) {
				this.formData.user_login = savedUsername;
				this.formData.password = savedPassword;
				this.rePasswordVal = ['记住账号和密码']
			}
		},

		methods: {
			// 密码变更
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			clearIcon: function() {
				this.formData.user_login = '';

			},
			clearPwdIcon() {
				this.formData.password = '';
			},
			// 注册
			toRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			goBack() {
				this.$common.goBack()
			},
			// 记住
			handleRePassword() {
				if (this.rePasswordVal.length > 0) {
					this.rePasswordVal = []
				} else {
					this.rePasswordVal = ['记住账号和密码']
				}
			},
			// 暂不登录
			noSignIn() {
				let pages = getCurrentPages()
				// 没有上级页面，直接返回首页
				if (pages.length == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			// 打开忘记密码
			openForget() {
				this.$refs.forgetPassword.open()
			},
			// 打开验证码
			openCode(){
				this.$refs.codeLogin.open()
			},
			async login() {
				if (!this.formData.user_login) {
					uni.$u.toast('请输入账号');
					return false
				}
				if (!this.formData.password) {
					uni.$u.toast('请输入密码');
					return false
				}
				// 核心部分在这里
				// 仅在登录成功后存储账号和密码
				if (this.rePasswordVal.length > 0) {
					uni.setStorageSync('userName', this.formData.user_login);
					uni.setStorageSync('userPsw', this.formData.password); // 此处也不可存储加密之后的密码
				} else {
					// 如果用户未勾选“记住我”，清除本地存储中的用户名和密码
					uni.removeStorageSync('userName');
					uni.removeStorageSync('userPsw');
				}
				const {
					data: res
				} = await loginApi({
					user_login: this.formData.user_login,
					password: this.formData.password
				})
				console.log(res, '回到');
				uni.$u.toast(res.msg);
				if (res.code === 1) {
					store.commit('user/set_phone', res.data.user_login)
					store.commit('user/set_token', res.data.token)
					store.commit('user/set_userInfo', res.data)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 400)
					
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background-image: url('@/static/images/login/bj.png');
		background-size: 100% 100%;

	}

	.u-nav-slot-left {
		width: px_2_vw(80);
		height: px_2_vw(80);

		image {
			width: px_2_vw(60);
			height: px_2_vw(60);
		}
	}

	.login-form {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10%;


	}

	.input-custom {
		width: 100%;
		height: px_2_vw(109);
		position: relative;
		// ::v-deep .uni-input-wrapper{
		// 	height: px_2_vw(120) !important;
		// 	caret-color:red;

		// }
	}

	.inputText {
		// min-height: 76rpx;
		min-height: px_2_vw(109);
		font-size: 36rpx;
		padding-left: 30rpx;
		border-radius: 8rpx;
		caret-color: #3B96FC;
		border: 4rpx solid #9FBCE2;
		background: #fff;
		border-radius: 60rpx;
		flex: 1;
	}

	.clear-icon {
		position: absolute;
		right: 30rpx;
	}

	.eye-icon {
		position: absolute;
		left: 10rpx;
	}

	.local {
		color: #898989;
		font-size: 24rpx;
		font-weight: bold;
	}

	.active {
		color: #3B96FC !important;
	}

	.login-btn {
		width: px_2_vw(98);
		height: px_2_vw(98);
		background: linear-gradient(0deg, #015EEA 0%, #00C0FA 100%);
		border-radius: 50%;
		margin: 56rpx 0 38rpx 0;

		image {
			width: px_2_vw(48);
			height: px_2_vw(43);
		}
	}

	.register {
		width: 54%;

		font-size: px_2_vw(24);

		image {
			width: px_2_vw(32);
			height: px_2_vw(32);
		}
	}
</style>